<template>
  <el-card class="page-container" :class="{ 'page-loaded': pageLoaded }">
    <div class="main-layout">
      <!-- 左侧导航栏 -->
      <el-aside width="220px" class="sidebar">
        <div class="sidebar-header">
          <!-- 统一Logo：对话气泡+单星星 -->
          <svg
              class="header-logo"
              viewBox="0 0 48 48"
              fill="none"
          >
            <!-- 外层对称气泡形状 -->
            <path d="M12 24C12 15.1634 19.1634 8 28 8C36.8366 8 44 15.1634 44 24C44 32.8366 36.8366 40 28 40C23.5817 40 19.5291 38.2426 16.5858 35.2993L12 40V24Z"
                  stroke="#1E40AF" stroke-width="2.5" fill="#EFF6FF"/>

            <!-- 中央评分星星 -->
            <path d="M24 14L26.5 22L34 22L28 26.5L30 34L24 30L18 34L20 26.5L14 22L21.5 22L24 14Z"
                  fill="#1E40AF"/>
          </svg>
          <span>贴文动态</span>
        </div>

        <el-menu
            class="custom-el-menu"
            @open="handleOpen"
            @close="handleClose"
            v-model="selection"
            unique-opened
            background-color="#ffffff"
            text-color="#333"
            active-text-color="#1E40AF"
        >
          <el-menu-item
              v-for="item in menuItems"
              :key="item.index"
              :index="item.index"
              @click="item.index === 'postPublish' ? changeToPostPublish() : changeToPostManage()"
              :class="{ 'menu-item-active': selection === item.index }"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.text }}</span>
            <!-- 交互反馈波纹 -->
            <span class="menu-ripple"></span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧主区域 -->
      <el-main class="main-content">
        <div class="content-wrapper">
          <transition :name="transitionName" mode="out-in">
            <div v-if="showContent" key="content" class="animated-content">
              <PostPublish v-if="selection === 'postPublish'" />
              <PostManage v-else-if="selection === 'postManage'" />
            </div>
          </transition>
        </div>
      </el-main>
    </div>
  </el-card>
</template>

<script setup>
import { CirclePlus, Collection, EditPen, Shop } from "@element-plus/icons-vue";
import PostPublish from "@/views/merchant/PostPublish.vue";
import PostManage from "@/views/merchant/PostManage.vue";
import { ref, computed, onMounted, nextTick, watch } from "vue";

const selection = ref('postPublish'); // 默认选中“发布贴文”
const menuItems = [
  { index: 'postPublish', icon: EditPen, text: '发布贴文' },
  { index: 'postManage', icon: Collection, text: '贴文管理' }
];

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};

const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const changeToPostPublish = () => {
  if (selection.value !== 'postPublish') {
    selection.value = 'postPublish';
    triggerAnimation();
  }
};

const changeToPostManage = () => {
  if (selection.value !== 'postManage') {
    selection.value = 'postManage';
    triggerAnimation();
  }
};

// 动画控制
const showContent = ref(true);
const transitionName = computed(() => {
  return selection.value === 'postPublish' ? 'slide-right' : 'slide-left';
});

const triggerAnimation = () => {
  showContent.value = false;
  setTimeout(() => {
    showContent.value = true;
  }, 50);
};

// 页面加载动画
const pageLoaded = ref(false);
onMounted(() => {
  setTimeout(() => {
    pageLoaded.value = true;
  }, 100);
});

// 监听路由变化，更新导航状态
const updateMenuState = () => {
  nextTick(() => {
    const activeItem = document.querySelector('.custom-el-menu .el-menu-item.is-active');
    if (activeItem) {
      activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
};

// 初始加载和菜单切换时更新状态
onMounted(updateMenuState);
watch(selection, updateMenuState);
</script>

<style scoped lang="scss">
// 颜色变量（统一为系统主色调）
$primary: #1E40AF;
$primary-light: rgba(30, 64, 175, 0.1);
$primary-dark: #132A63;
$text-primary: #1E293B;
$text-secondary: #64748B;
$bg-light: #F8FAFC;
$border-color: #E2E8F0;
$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.page-container {
  height: 99%;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background-color: #fff;
  transition: $transition;

  &:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }

  &.page-loaded {
    animation: fadeIn 0.5s ease-out forwards;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.main-layout {
  display: flex;
  height: 100%;
}

.sidebar {
  background-color: #ffffff;
  height: 100%;
  border-right: 1px solid $border-color;
  transition: $transition;

  .sidebar-header {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 19px;
    font-weight: 600;
    color: $text-primary;
    border-bottom: 1px solid $border-color;
    background-color: #fcfcfc;

    .header-logo {
      width: 28px;
      height: 28px;
      margin-right: 12px;
      transition: transform 0.3s ease, filter 0.3s ease;

      &:hover {
        transform: rotate(5deg) scale(1.1);
        filter: drop-shadow(0 0 6px rgba(30, 64, 175, 0.2));
      }
    }
  }

  .custom-el-menu {
    border-right: none;

    .el-menu-item {
      height: 60px;
      line-height: 60px;
      font-size: 15px;
      padding-left: 24px !important;
      transition: $transition;
      position: relative;
      overflow: hidden;
      cursor: pointer;

      // 按钮波纹效果
      &:active {
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 120px;
          height: 120px;
          background: rgba(30, 64, 175, 0.2);
          border-radius: 50%;
          transform: translate(-50%, -50%) scale(0);
          animation: ripple 0.6s ease-out forwards;
        }
      }

      .el-icon {
        width: 26px;
        font-size: 17px;
        margin-right: 10px;
        transition: $transition;
      }

      &:hover {
        background-color: $primary-light;
        transform: translateX(4px);

        .el-icon {
          transform: scale(1.1);
        }
      }

      &.is-active {
        background-color: $primary-light;
        border-right: 4px solid $primary;
        font-weight: 500;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 3px;
          background-color: $primary;
          transform: scaleY(0.6);
          transition: $transition;
        }

        &:hover {
          &::before {
            transform: scaleY(1);
          }
        }

        .el-icon {
          color: $primary;
          transform: scale(1.1);
        }
      }
    }
  }
}

// 波纹动画
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.main-content {
  padding: 0;
  background-color: $bg-light;
  overflow: hidden;
  position: relative;
}

.content-wrapper {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.animated-content {
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 24px;
  transition: $transition;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

/* 页面切换动画 */
.slide-right-enter-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border-radius: 12px;
  overflow: hidden;
}

.slide-right-enter-from {
  transform: translateX(30px);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(-30px);
  opacity: 0;
}

.slide-left-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
  transition: $transition;
}

::-webkit-scrollbar-thumb:hover {
  background: $primary;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100% !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid $border-color;

    .custom-el-menu {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;

      .el-menu-item {
        flex: 0 0 auto;
        padding: 0 16px !important;
      }
    }
  }
}
</style>